<div class="fui-progress-flex">
  <div class="fui-progress-bar">
    <div class="fui-progress-bar-background fui-progress-bar-element" ></div>
    <div 
      class="fui-progress-bar-primary fui-progress-bar-element" 
      [ngStyle]="barTransform()" 
      [ngClass]="status" 
      title="{{percent}}%"
    >
    </div>    
  </div>
  <div class="fui-progress-status" [ngSwitch]="status" ngClass="{{ 'info-' + status  }}">
    <p class="active-percent" *ngSwitchCase="'active'"> {{ percent }}% </p>
    <svg class="icon-exception" *ngSwitchCase="'exception'" fuiIcon="cross-circle" size="sm"></svg>
    <svg class="icon-success" *ngSwitchCase="'success'" fuiIcon="check-circle" size="sm"></svg>
  </div>
</div>



